<template>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>产品信息页面</title>
        <link rel="stylesheet" href="styles.css">
    </head>

    <body >
        <div class="product-info-container" >
            <div class="product-header">
                <img src="https://picsum.photos/200/150?random=1" alt="产品图片">
                <div class="product-header-details" :data="teee">
                    <h2>兔腿</h2>
                    <p>生产批次：DR89568525</p>
                    <p>保质期：90天</p>
                    <p>生产许可证号：VB2536589</p>
                    <p>生产企业：湖北商贸有限公司</p>
                </div>
                <div class="product-header-buttons">
                    <button>修改基本信息</button>
                    <button>导出溯源码</button>
                </div>
            </div>
            <div class="product-details">
                <div class="tab-container">
                    <ul class="tab-list">
                        <li class="tab-item active">养殖信息（5/5）</li>
                        <li class="tab-item">屠宰信息（5/5）</li>
                        <li class="tab-item">深加工信息（0/5）</li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active">
                            <h3>养殖信息</h3>
                            <button class="setup-button">设置</button>
                            <table>
                                <tr>
                                    <td>品种：</td>
                                    <td>伊拉兔</td>
                                </tr>
                                <tr>
                                    <td>来源：</td>
                                    <td>采购</td>
                                </tr>
                                <tr>
                                    <td>饲养天数：</td>
                                    <td>90天</td>
                                </tr>
                                <tr>
                                    <td>饲料品牌：</td>
                                    <td>大北兔</td>
                                </tr>
                                <tr>
                                    <td>饲养负责人：</td>
                                    <td>小陈</td>
                                </tr>
                                <tr>
                                    <td>出栏日期：</td>
                                    <td>2021年10月18日</td>
                                </tr>
                            </table>
                        </div>
                        <div class="tab-pane">
                            <!-- 屠宰信息内容 -->
                            <h3>屠宰信息</h3>
                            <button class="setup-button">设置</button>
                            <!-- 此处可添加屠宰信息相关表格或内容 -->
                        </div>
                        <div class="tab-pane">
                            <!-- 深加工信息内容 -->
                            <h3>深加工信息</h3>
                            <button class="setup-button">设置</button>
                            <!-- 此处可添加深加工信息相关表格或内容 -->
                        </div>
                    </div>
                </div>
                <div class="health-info">
                    <h3>保健信息</h3>
                    <button class="add-row-button">新增行</button>
                    <table>
                        <tr>
                            <th>饲养天数</th>
                            <th>保健方式</th>
                            <th>保健方法</th>
                            <th>操作</th>
                        </tr>
                        <tr>
                            <td>35</td>
                            <td>兔瘟单苗</td>
                            <td>皮下注射</td>
                            <td>
                                <button>修改</button>
                                <button>删除</button>
                            </td>
                        </tr>
                        <tr>
                            <td>40</td>
                            <td>巴氏二联苗</td>
                            td>
                            <td>皮下注射</td>
                            <td>
                                <button>修改</button>
                                <button>删除</button>
                            </td>
                        </tr>
                        <tr>
                            <td><input type="text"></td>
                            <td><input type="text"></td>
                            <td><input type="text"></td>
                            <td>
                                <button>保存</button>
                                <button>取消</button>
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="certificate">
                    <h3>动检证</h3>
                    <div class="certificate-image">
                        <img src="https://picsum.photos/200/100?random=2" alt="动检证图片">
                        <button class="add-image-button">+</button>
                    </div>
                </div>
                <div class="enterprise-info">
                    <h3>企业信息</h3>
                    <button class="setup-button">设置</button>
                    <table>
                        <tr>
                            <td>养殖场：</td>
                            <td>四川锦祥养殖基地</td>
                        </tr>
                        <tr>
                            <td>负责人：</td>
                            <td>X总</td>
                        </tr>
                        <tr>
                            <td>存栏数量：</td>
                            <td>200只</td>
                        </tr>
                    </table>
                </div>
                <div class="enterprise-photos">
                    <h3>企业照片</h3>
                    <div class="photo-container">
                        <img src="https://picsum.photos/200/100?random=3" alt="企业照片">
                        <button class="add-image-button">+</button>
                    </div>
                    <div class="photo-container">
                        <img src="https://picsum.photos/200/100?random=4" alt="企业照片">
                        <button class="add-image-button">+</button>
                    </div>
                </div>
            </div>
        </div>
    </body>

    </html>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted, watch, toRefs } from 'vue'
import { useRouter } from 'vue-router'
import axios from 'axios'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useCounterStore } from "@/stores/counter"
import { Plus } from '@element-plus/icons-vue'
import type { UploadProps } from 'element-plus'
const router = useRouter()

//上传图片
const consid = reactive({
    trId: 0,
    goodsId: "",
    productionbatches: "",
    shelflifeDay: "",
    productionlicense: "",
    productionCompany: "",
    coverimage: "",
})


//表格显示
const teee = ref([])
const Gettable = () => {
    axios.get("http://localhost:42960/api/User/GetAccounts", {
        params: {
            trId: consid.trId,
        }
    }).then(res => {
        teee.value = res.data.data
        console.log(consid.trId)
    })
}








onMounted(() => {
    Gettable()
})



</script>

<style>
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
}

.product-info-container {
    max-width: 800px;
    margin: 0 auto;
}

.product-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.product-header img {
    width: 200px;
    height: 150px;
    object-fit: cover;
    margin-right: 20px;
}

.product-header-details h2 {
    margin: 0;
}

.product-header-details p {
    margin: 5px 0;
}

.product-header-buttons button {
    margin-left: 10px;
    padding: 5px 10px;
}

.tab-container {
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 20px;
}

.tab-list {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
}

.tab-item {
    padding: 10px 15px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
}

.tab-item.active {
    border-bottom: 2px solid #007bff;
    color: #007bff;
}

.tab-content {
    padding: 15px;
}

.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
}

.setup-button {
    margin-bottom: 10px;
    padding: 5px 10px;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 10px;
}

table td,
table th {
    padding: 5px;
    border: 1px solid #ccc;
}

.health-info button {
    margin-bottom: 10px;
    padding: 5px 10px;
}

.certificate-image,
.photo-container {
    position: relative;
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 10px;
}

.certificate-image img,
.photo-container img {
    width: 200px;
    height: 100px;
    object-fit: cover;
}

.add-image-button {
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 50%;
    background-color: #ccc;
    cursor: pointer;
}
</style>